<template>
  <div class="order-chart">
    <div class="order-chart">
      <div class="chart-info">
        <img class="info-img" :src="item.unitPicture" alt="" />
      </div>
      <div class="img-bottom">
        <div class="bottom-left">
          <div class="date">
            <div class="day">{{ getFormDate(item.checkInDate) }}</div>
            <div class="week-time">
              <span class="week">{{ getFormDate(item.checkInDate, true) }}</span>
              <span class="time">{{ item.checkInLatestTime }}</span>
            </div>
          </div>
          <img class="arrow-img" src="@/assets/img/order/icon_right_orderlist.png" alt="" />
          <div class="date">
            <div class="day">{{ getFormDate(item.checkOutDate) }}</div>
            <div class="week-time">
              <span class="week">{{ getFormDate(item.checkOutDate, true) }}</span>
              <span class="time">{{item.checkOutLatestTime}}</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="bottom-right">
          <div class="name">支付总价</div>
          <div class="price">￥{{ item.prepayAmount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue'

  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    }
  })

  const getFormDate = computed(() => {
    return (dataString, isWeek = false) => {
      let date = new Date(dataString)
      if (isWeek) {
        return '周' + '日一二三四五六'.charAt(date.getDay())
      }
      return `${date.getMonth() + 1}月${date.getDate()}日`
    }
  })
</script>

<style lang="less" scoped>
  .order-chart {
    position: relative;
    .chart-info {
      width: 100%;
      .info-img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    .img-bottom {
      position: absolute;
      width: 100%;
      height: 60px;
      background: rgba(9, 10, 14, 0.7);
      left: 0;
      bottom: 0;
      display: flex;
      border-radius: 0 0 6px 6px;

      .bottom-left {
        flex: 2;
        display: flex;
        align-items: center;
        border-right: #fff;
        justify-content: space-evenly;
        .date {
         
          .day {
            font-size: 16px;
            color: #fff;
          }
          .week-time {
            .week {
              font-size: 12px;
              opacity: 0.8;
              color: #fff;
            }
            .time {
              font-size: 12px;
              opacity: 0.8;
              color: #fff;
            }
          }
        }
        .arrow-img {
          width: 16px;
          height: 12px;
         
        }
      }
      .line {
        width: 1px;
        background-color: #fff;
        height: 40px;
        margin-top: 10px;
      }
      .bottom-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .name {
          color: #fff;
          font-size: 14px;
          opacity: 0.8;
        }
        .price {
          font-size: 16px;
          margin-top: 5px;
          color: var(--primary, #ff9645);
        }
      }
    }
  }
</style>
